<!--
 * @Author: gaoyu gy15354315043@163.com
 * @Date: 2024-10-15 14:59:14
 * @LastEditors: gaoyu gy15354315043@163.com
 * @LastEditTime: 2024-12-23 17:45:00
 * @Description: 统一导航
 * Copyright (c) 2024-present HBIS Digital Technology Co.,Ltd. All rights reserved. 
-->
<template>
    <div class="unified_navigation">
        <div class="left_box">
            <!-- 九宫格 -->
            <NineSquareGrid v-if="device !== 'mobile'" />
            <p class="line" v-if="device !== 'mobile'" />
            <!-- 平台名称、平台图标 -->
            <Platform />
            <!-- 工作台 -->
            <div class="workbenches" v-if="hasWorkbenches" @click="toWorkbenches">
                <svg-icon icon-class="workbenches" />
                <span>工作台</span>
            </div>
        </div>
        <div style="display: flex;flex: 1;" />
        <div class="right_box">
            <!-- 菜单搜索 -->
            <MenuSearch v-if="device !== 'mobile'" />
            <!-- 消息 -->
            <UnReadMessage v-if="hasMessageService" />
            <!-- 个人中心 -->
            <PersonalCenter />
        </div>
    </div>
</template>
<script lang="ts" setup>
import NineSquareGrid from './components/nine-square-grid/views/index.vue'
import Platform from './components/platform/views/index.vue'
import MenuSearch from './components/menu-search/views/index.vue'
import UnReadMessage from './components/unread-message/views/index.vue'
import PersonalCenter from './components/personal-center/views/index.vue'
import mitt from '../utils/mitt'
import { useAppStore } from '@/framework/store/modules/app';
import { getWorkbenchFunctionAppInfo } from '../api/index'
import { getServersStatus } from '@/framework/api/system-info/index';
import { getToken } from '@/framework/utils/auth';
import { useSettingsStore } from '@/framework/store/modules/settings';
const settingsStore = useSettingsStore();
const hasMessage = computed(() => settingsStore.hasMessage)
const appStore = useAppStore();
const device = computed(() => appStore.device);
const hasWorkbenchesPermission = ref(false)
const workbencheIp = ref('')
onMounted(() => {
    getWorkbenches()
});
const hasWorkbenches = computed(() => {
    // 微服务框架不展示工作台，无权限不展示工作台
    return device.value !== 'mobile'
})
const hasMessageService = computed(() => {
    // 微服务(it服务、微服务框架、流程微服务版)需根据是否启动消息服务，展示小铃铛；单体版展示小铃铛
    return device.value !== 'mobile' && hasMessage.value
})
/**
 * @description: 点击“工作台”跳转
 * @return {*}
 */
function toWorkbenches(): void {
    mitt.emit('closeNineGrid')
    window.open(`${workbencheIp.value}?token=${getToken()}`, '_blank')
}
/**
 * @description: 获取工作台ip
 * @return {*}
 */
async function getWorkbenches(): Promise<void> {
    const res = await getWorkbenchFunctionAppInfo()
    if (res.data) {
        workbencheIp.value = res.data.appAddress
        hasWorkbenchesPermission.value = true
    } else {
        hasWorkbenchesPermission.value = false
    }
}
</script>
<style scoped lang="scss">
.unified_navigation {
    background: #191919;
    height: 60px;
    line-height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 12px 20px 12px 0;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 120;

    .left_box {
        display: flex;
        align-items: center;

        .line {
            width: 1px;
            height: 20px;
            border-left: 1px solid #fff;
            opacity: 0.2;
        }

        .workbenches {
            margin: 0 16px;
            cursor: pointer;

            svg {
                margin-right: 6px;
            }

            span {
                font-size: 14px;
                color: #FFFFFF;
                opacity: 0.9;
                font-family: PingFang SC, PingFang SC;
            }
        }
    }

    .right_box {
        display: flex;
        align-items: center;

        div {
            color: #fff;
        }
    }


}
</style>